#about{
	width: 100%;
	height: 30em;
	background: #76B852;
}
#about>div,#work>div,#tel>div{
	margin: 0 auto;
}
#about>div>h2,#work>div>h2,#tel>div>h2{
	font-size: 44px;
	text-align: center;
	padding-top: 50px;
	color: #323B43;
}
h3{
	font-style: italic;
	font-size: 1.3em;
	line-height: 1.5em;
	text-align: center;
	color: #d9ffc4;
	font-weight: 600;
	margin-top: 1em;
}
h4{
	width: 50%;
	font-size: 1.2em;
	float: left;
	text-align: center;
	color: #d9ffc4;
	margin-top: 2em;
	margin-bottom: 1.5em;
}
#about>div>p{
	width: 40%;
	margin: 0 5%;
	float: left;
	font-size: 1.1em;
	line-height: 1.1em;
	letter-spacing: 0.05em;
	font-family: "楷体";
	color: #fff;
}
.banner_bg{
	width: 100%;
	height: 40em;
	background: #ced7df;
}
#banner{
	width: 100%;
	height: 100%;
	clear: both;
  	padding:0 15px;
  	margin:0 auto;
    position: relative;
}
/*响应*/
@media (min-width: 51em) {
  #banner,#about>div,#my_skill>div,#work>div,#tel>div{
    width: 50em;
  }
}
@media (min-width: 66em) {
  #banner,#about>div,#my_skill>div,#work>div,#tel>div {
    width: 64em;
  }
}
@media (min-width: 80em) {
  #banner,#about>div,#my_skill>div,#work>div,#tel>div {
    width: 78em;
  }
}
.container_lf{
  display: inline-block;
  width: 33.33333%;
  height:100%;
  position: absolute;
  left: 0;
  top:0;
}
.container_rt{
  display: inline-block;
	width: 66.66666%;
	height:100%;
  position: absolute;
  right: 0;
  top:0;
}
.container_rt>div{
  width: 72%;
  height: 38em;
  margin-top: 2.22em;
  margin-left: 24%;
  background: url(../img/me.png) no-repeat;
}
 .guodong{
	display: block;
	width: 150px;
	height: 40px;
	background: #f4fef4;
	border-radius: 3px;
	text-decoration: none;
	outline: none;
	box-shadow: 0 0 0 -2px #CED7DF, 0 0 0 -1px #f4fef4;/*前一个背景色 后一个按钮色*/
	border: none;
	text-align: center;
	line-height: 40px;
	color: #000;
	margin-top: 25px;
	margin-left: 20px;
	font-size: 15px;
	-webkit-transition: -webkit-box-shadow .3s;
	-webkit-transition: box-shadow .3s;
	transition: box-shadow .3s;
}
.guodong:hover{ 
	color: #6cf;
	font-weight: 900;
	box-shadow: 0 0 0 2px #CED7DF, 0 0 0 4px #f4fef4;
	-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
	transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
	-webkit-animation: gelatine 0.5s 1;
	animation: gelatine 0.5s 1;
}
@keyframes gelatine {
	from,to {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	25% {
		-webkit-transform: scale(0.9, 1.1);
		transform: scale(0.9, 1.1);
	}
	50% {
		-webkit-transform: scale(1.1, 0.9);
		transform: scale(1.1, 0.9);
	}
	75% {
		-webkit-transform: scale(0.95, 1.05);
		transform: scale(0.95, 1.05);
	}
	from,to {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	25% {
		-webkit-transform: scale(0.9, 1.1);
		transform: scale(0.9, 1.1);
	}
	50% {
		-webkit-transform: scale(1.1, 0.9);
		transform: scale(1.1, 0.9);
	}
	75% {
		-webkit-transform: scale(0.95, 1.05);
		transform: scale(0.95, 1.05);
	}
}
@-webkit-keyframes gelatine {
	from,to {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	25% {
		-webkit-transform: scale(0.9, 1.1);
		transform: scale(0.9, 1.1);
	}
	50% {
		-webkit-transform: scale(1.1, 0.9);
		transform: scale(1.1, 0.9);
	}
	75% {
		-webkit-transform: scale(0.95, 1.05);
		transform: scale(0.95, 1.05);
	}
	from,to {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	25% {
		-webkit-transform: scale(0.9, 1.1);
		transform: scale(0.9, 1.1);
	}
	50% {
		-webkit-transform: scale(1.1, 0.9);
		transform: scale(1.1, 0.9);
	}
	75% {
		-webkit-transform: scale(0.95, 1.05);
		transform: scale(0.95, 1.05);
	}
}
.my-name{
	margin-top: 80px;
	margin-left: 20px;
	display: inline-block;
	width: 400px;
	height: 132px;
	font-size: 120px;
	font-weight: 600;
	color:#363736;
	line-height: 1;
	position: relative;
}
.my-name:hover {
	color: #fff;
}
.my-name span::before {
	content: attr(data-letters);
	position: absolute;
	color:#6cf;
	left: 0;
	overflow: hidden;
	width: 0%;
	height: 125px;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.my-name:hover span::before {
	width: 100%;
	height: 125px;
}
#my_skill{
	width: 100%;
	height: 25em;
	background: #323B43;
}
#my_skill>div{
	margin: 0 auto;
}
#my_skill>div>h2{
	font-size: 44px;
	text-align: center;
	padding-top: 50px;
	color: #CED7DF;
}
#my_skill>div>span.jn{
	display: inline-block;
	width:25%;
	font-size: 22px;
	float: left;
	position: relative;
	text-align: center;
}
.jn{
	color: #CED7DF;
	margin-top: 50px;
}
.jn_bg{
	display: inline-block;
	width: 80%;
	height: 4px;
	position: absolute;
	background: #323B43;
	top: 4em;
	left: 2em;
	margin: 0 auto;
	border-radius: 25px;
	border-left:1px solid #2a2a2a; 
	border-top:1px solid #2a2a2a; 
	border-right:1px solid #222; 
	border-bottom:1px solid #222;  
}
.html,.ui,.study,.javascript{
	position: absolute;
	top: 1px;
	left: 0px;
	height: 2px;
	width: 0%;
	background: #2187FF;
	border-radius: 3px;
	position:absolute;
	box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
	-webkit-transition: width 1s;
	transition: width 1s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
body{
	overflow: hidden; 
	position: relative;
	z-index: -1;
}
#shuimo_parent{
	overflow: hidden; 
	position: relative;
	z-index: 10000;
}
#shuimo{
	position: absolute;
	height: 100%;
	width: 2500%;
	background: url(../img/ink.png) no-repeat 0 0;
	overflow: hidden; 
	background-size: 100% 100%;
	
}
#tel{
	height: 25em;
	background: #CED7DF;
}
#tel>div>ul>li{
	float: left;
	width: 25%;
	margin-top: 3em;
	color: #323b43;
	cursor: pointer;
}
.qq{
	width: 11em;
	height:10em;
	margin: 0 auto;
	background: url(../img/qq.png) no-repeat;
}
.wx{
	background: url(../img/wx.png) no-repeat;
}
.wb{
	background: url(../img/wb.png) no-repeat;
}
.yx{
	background: url(../img/yx.png) no-repeat 0 20px;
}
#tel>div>ul>li>p{
	text-align: center;
}
#tel>div>ul>li:hover{
	color: #11f;
	-webkit-transition: color 1s;
	transition: color 1s;
}
#bq{
	height: 3em;
	background: #323B43;
}
#bq>p{
	text-align: center;
	color: #C4CDD5;
	line-height: 3em;
}
#toTop{
	width: 32px;
	height: 32px;
	opacity: 0;
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: url(../img/arr.png) no-repeat;
	cursor: pointer;
}
#work{
	width: 100%;
	height: 40em;
	background: #76B852;
}
#work_img{
	height: 25em;
	width: 50%;
	margin-left:25%;
	cursor: pointer;
}
#work>div>ul{
	position: relative;
}
#work>div>ul>li{
	width: 50%;
	margin-top: 3em;
	float: left;
}
#work>div>ul>li>div{
	position: relative;
}
#work_text{
	font-size: 20px;
	color: #fff;
	text-align: center;
	background: rgba(225,125,220,0.9);
	width: 50%;
	margin-left:25%; 
	position: absolute;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	bottom: 0;
}
#work_img_big{
	position: absolute;
	left: 0;
	top: -140px;
	width: 32em;
	height: 50em;
	margin-left:40%;
	display: none;
	-webkit-transform: scale(0.6, 0.6);
	transform: scale(0.6, 0.6);
}
#work>div>ul>li>div>h3{
	margin-top: 0.5em;
	text-align: center;
	font-size: 1.7em;
	margin-bottom: 0.3em;
}
#work>div>ul>li>div>p{
	line-height: 1.5em;
	font-size: 1.1em;
	color: #323B43;
}
@media (min-width: 26em) {
  #work>div>ul>li>div>p{
  	font-size: 0.9em;
  }
}
@media (min-width: 80em) {
  #work>div>ul>li>div>p{
  	font-size: 1.1em;
  }
}